﻿@inherits AdminCompontentBase

<DefaultSheetDialog Value="Visible" ValueChanged=UpdateVisible Title="@T("Add User")">
    <MForm Model=User EnableValidation EnableI18n>
        <MStepper Value="Step">
            <MStepperItems>
                <MStepperContent Step="1">
                    <AutoHeight AutoClass="d-flex">
                        <AutoHeightContent>
                            <div class="ma-auto text-center">
                                <ButtonGroup @bind-Value="User.Gender" StyleType=StyleTypes.Toggle TValue="GenderTypes" />
                                <br />
                                <div class="mt-12">
                                    <DefaultChangeImage @bind-Value="User.Avatar" Gender="User.Gender" WhenFileChangeUpload />
                                </div>
                            </div>
                        </AutoHeightContent>
                        <FooterContent>
                            <div class="d-flex">
                                <MSpacer></MSpacer>
                                <SButton Medium OnClick="()=>Step=2">@T("Next step")</SButton>
                            </div>
                        </FooterContent>
                    </AutoHeight>
                </MStepperContent>
                <MStepperContent Step="2">
                    <AutoHeight Overflow AutoClass="mt-9">
                        <HeaderContent>
                            <div class="d-flex">
                                <div class="mx-auto text-center">
                                    <MAvatar Size=80>
                                        <img src="@User.Avatar" />
                                    </MAvatar>
                                    <SNameTextField @bind-Value="@User.DisplayName" Placeholder="@T("Give him a nickname!")" style="width:212px;" />
                                </div>
                            </div>
                        </HeaderContent>
                        <AutoHeightContent>
                            <DefaultTitle Class="mb-6">@T("BasicInformation")</DefaultTitle>
                            <STextField @bind-Value="User.Name" Class="mb-12" Label="@T("Name")" />
                            <STextField @bind-Value="User.PhoneNumber" Required Class="mb-12" Label="@T("PhoneNumber")" />
                            <STextField @bind-Value="User.Email" Class="mb-12" Label="@T("Email")" />
                            <STextField @bind-Value="User.IdCard" Class="mb-12" Label="@T("IdCard")" />
                            <STextField @bind-Value="User.Account" Class="mb-12" Label="@T("Account")" />
                            <STextField @bind-Value="User.Password" Required Label="@T("Password")" />
                            @if (Fill is false)
                            {
                                <div @onclick="() => Fill = true" class="mt-12 hover-pointer d-flex" style="text-align:center;height:48px;">
                                    <dvi class="ma-auto">
                                        <SIcon Class="emphasis2--text" IsDefaultToolTip="false">mdi-menu-down</SIcon>
                                        <span class="regular--text body2">@T("Fill in more")</span>
                                    </dvi>
                                </div>
                            }
                            else
                            {
                                <DefaultTitle Class="mt-12 mb-6">@T("DetailInformation")</DefaultTitle>
                                <STextField @bind-Value="User.CompanyName" Class="mt-4 mb-12" Label="@T("CompanyName")" />
                                <STextField @bind-Value="User.Address.Address" Class="mb-12" Label="@T("Address")" />
                                <STextField @bind-Value="User.Department" Class="mb-12" Label="@T("Department")" />
                                <STextField @bind-Value="User.Position" Label="@T("Position")" />
                            }
                        </AutoHeightContent>
                        <FooterContent>
                            <div class="d-flex mt-6">
                                <MSpacer></MSpacer>
                                <SButton Medium OnClick="()=>Step=1" Outlined>@T("Previous step")</SButton>
                                <SButton Medium OnClick="async ()=> await NextStepAsync(context)" Class="ml-6">@T("Next step")</SButton>
                            </div>
                        </FooterContent>
                    </AutoHeight>
                </MStepperContent>
                <MStepperContent Step="3">
                    <AutoHeight>
                        <HeaderContent>
                            <div>
                                <RoleSelectForUser @bind-Value="User.Roles" Class="mb-12 mt-1" />
                            </div>                           
                        </HeaderContent>
                        <AutoHeightContent>
                            <div class="global-nav" style="display: flex;max-height:calc(100vh - 330px);">
                                <PermissionsConfigure                                                      
                                    Roles=User.Roles
                                    @bind-Value="User.Permissions"                                                    
                                    @bind-Preview=Preview />
                            </div>
                        </AutoHeightContent>
                        <FooterContent>
                            <div class="d-flex mt-6">
                                <MSpacer></MSpacer>
                                <SButton Medium OnClick="()=>Step=2" Outlined>@T("Previous step")</SButton>
                                <SButton Medium Outlined OnClick="()=> Preview=true" Class="ml-6">@T("Preview")</SButton>
                                <SButton Medium OnClick="async () => await AddUserAsync(context)" Class="ml-6">@T("Submit")</SButton>
                            </div>
                        </FooterContent>
                    </AutoHeight>
                </MStepperContent>
            </MStepperItems>
        </MStepper>
    </MForm>
</DefaultSheetDialog>
